<script lang="ts" setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
let router=useRouter();
let booData=ref(null)
let formData=ref({
  name:'',
  type:''
})
function init(){axios.get("http://localhost:8080/api/books").then((res)=>{
    console.log(res)
    // console.log(res)
    booData.value=res.data
})
}
init()
function headleDetailClick(data:any){
   router.push({
      path:"/details",
      query:{
        id:data.row.id
      }
    })
}
function submit(){
  axios.get("http://localhost:8080/api/searchBooks",{params:formData.value}).then((res)=>{
    booData.value=res.data
  })
}
function deleteBook(data:any){
  axios.delete("http://localhost:8080/api/deleteBook/"+data.row.id).then((res)=>{
    init()
  })
}
</script>
<template>
    <h1>书籍管理系统</h1>
     <form action="">
        书名：<input type="text" v-model="formData.name">
        类型：<input type="text" v-model="formData.type">
        <el-button type="primary" size="small" style="margin-left:10px ;" @click="submit">搜索</el-button>
        <el-button type="primary" size="small" @click="router.push({name:'insertFrom'})">插入</el-button>
    </form>
    <el-table :data="booData" stripe style="width: 100%">

    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="name" label="书名" width="180" />
    <el-table-column prop="type" label="类型" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="data">
        <el-button type="primary" size="small" @click="headleDetailClick(data)">
          详情
        </el-button>
        <el-button type="primary" size="small" @click="router.push({name:'updateFrom',query:{id:data.row.id}})">编辑</el-button>
        <el-button type="primary" size="small" @click="deleteBook(data)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  
</template>
<style scoped>
</style>